<template>
  <table-form :disabled="disabled" @next="sales7Ctrl" @jump="jump">
    <template slot="title">
      <h2 class="fromDivTit">
        <div>请填写售价和上传合同</div>
        <i
          v-if="isEdit && detailRes.step < 10"
          class="edit-icon"
          @click="isEnabled = true"
        />
      </h2>
    </template>
    <div class="form-body">
      <el-form
        ref="sale7Form"
        :model="sale7Form"
        label-width="70px"
        class="formDiv"
        :rules="rules"
      >
        <el-row :gutter="32">
          <el-form-item label="售价:" prop="salePrice" label-width="85px">
            <el-col :xs="12" :sm="12" :lg="12" class="agg">
              <el-input
                v-model="sale7Form.salePrice"
                :disabled="isEdit && !isEnabled"
                type="number"
                placeholder="$请输入"
              />
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="32">
          <el-form-item
            :required="true"
            label="合同:"
            label-width="100px"
            class="form_up"
          >
            <el-col :xs="24" :sm="24" :lg="24" class="agg">
              <Upload
                :id="id"
                :maxcount="5"
                :urls="sale7Form.contactFilePath || ''"
                tip="可上传PDF、图片(jpg/ png/ jpeg)"
                :disabled="isEdit && !isEnabled"
                format="jpg,pdf,png,jpeg"
                @getImage="getAdImage"
              />
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="32">
          <el-form-item label="备注:" label-width="85px">
            <el-col :xs="24" :sm="24" :lg="24" class="agg">
              <el-input
                v-model="sale7Form.remarkStep7"
                :disabled="isEdit && !isEnabled"
                type="textarea"
                :rows="5"
                placeholder="请输入"
              />
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>
      <div v-if="jumpReason" class="jump-box">
        <div class="jump-reson">跳过原因:</div>
        <span>{{ jumpReason }}</span>
      </div>
    </div>
    <p class="buyer">
      <span @click="objBuyer.show = true"> 买家取消</span>
      <span class="next_span" @click="objMo.show = true">业主取消</span>
    </p>
    <myModal :obj="objBuyer" @close="objBuyer.show = false" @save="buyerDel">
      <div class="mpdalBody">
        <p>确认买家取消？</p>
      </div>
    </myModal>
    <myModal :obj="objMo" @close="objMo.show = false" @save="cancellationDel">
      <div class="mpdalBody">
        <p>确认业主取消？</p>
      </div>
    </myModal>
    <template v-if="isEdit" slot="footer">
      <div class="dialog-footer">
        <el-button
          v-if="isEnabled"
          :disabled="disabled"
          type="primary"
          @click="saveEdit"
        >保存</el-button>
      </div>
    </template>
  </table-form>
</template>
<script>
import Upload from '@/components/Upload/SingleImage4'
import TableForm from '../../../lease/components/tableForm'
import myModal from '@/components/Modal'
import {
  saleStep7,
  sale7BuyerCancel,
  sale7OwnerCancel,
  edit
} from '@/api/sale'
export default {
  components: {
    TableForm,
    Upload,
    myModal
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rules: {
        salePrice: [{ required: true, message: '请输入售价', trigger: 'blur' }],
        remarkStep7: [
          { required: true, message: '请上传合同', trigger: 'blur' }
        ]
      },
      objBuyer: {
        show: false,
        title: null,
        width: '500px'
      },
      objMo: {
        show: false,
        title: null,
        width: '500px'
      },
      disabled: false,
      isEnabled: false,
      sale7Form: {
        salePrice: '',
        remarkStep7: '',
        contactFilePath: '',
        id: ''
      },
      value: '',
      textarea: '',
      detailRes: {
        jumpList: []
      }
    }
  },
  computed: {
    jumpReason() {
      if (!this.detailRes.jumpList) return ''
      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === 7
      })
      return hasReason ? hasReason.jumpNote : ''
    }
  },
  watch: {
    sale7Form: {
      handler(newVal, oldVal) {
        if (newVal.salePrice && newVal.contactFilePath) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  async mounted() {
    if (!this.isEdit) {
      this.sale7Form = {
        salePrice: '',
        remarkStep7: '',
        contactFilePath: '',
        id: this.id,
        stepName: '待上传合同'
      }
    } else {
      await this.$store.dispatch('detail/getSaleDatail', this.id)
      var detail = this.$store.state.detail.saleDetail
      this.detailRes = detail
      console.log(this.detailRes)
      this.sale7Form = Object.assign(
        {},
        {
          salePrice: detail.salePrice,
          remarkStep7: detail.remarkStep7,
          contactFilePath: detail.contactFilePath,
          id: this.id,
          stepName: '待上传合同'
        }
      )
    }
  },
  methods: {
    getAdImage(img) {
      this.sale7Form.contactFilePath = img
    },
    async sales7Ctrl() {
      this.sale7Form.id = this.id
      var sale7Res = await saleStep7(this.sale7Form)
      if (sale7Res.code === 200) {
        this.$emit('next')
      }
    },
    async saveEdit() {
      var res = await edit(this.sale7Form)
      if (res.code === 200) {
        this.$message({ message: '操作成功', type: 'success' })
        this.isEnabled = false
      }
    },
    jump() {
      this.$emit('jump', this.sale7Form)
    },
    async buyerDel() {
      await sale7BuyerCancel(this.id)
      this.objBuyer.show = false
      this.$emit('next', 5)
    },
    async cancellationDel() {
      await sale7OwnerCancel(this.id)
      this.objMo.show = false
      this.$emit('next', 5)
    }
  }
}
</script>
<style lang="scss" scoped >
.buyer {
  cursor: pointer;
  display: block;
  padding-left: 120px;
  color: #5ac6b7;
  font-size: 12px;
  margin-top: 60px;
}
.next_span {
  margin-left: 15px;
}
.form_up {
  margin-left: -16px;
}
.countFsColor {
  cursor: pointer;
}
.mpdalBody p {
  padding: 20px;
  text-align: center;
  font-size: 20px;
}
.myBnt {
  color: #5ac6b7;
  display: block;
  width: 100px;
  margin-left: 115px;
  margin-bottom: 20px;
  border: 0;
}
p {
  padding: 0;
  margin: 0;
}
.overview-content {
  min-height: calc(100vh - 160px);
  background: #eee;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
  background: #fff;
  overflow: hidden;
}
.el-upload__tip {
  display: inline-block;
}
.formdiv {
  width: calc(100% - 200px);
}
.agg {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.addAgg {
  color: #5ac6b7;
}
.fromDivArr {
  margin-bottom: 10px;
  overflow: hidden;
}
.form-body {
  display: flex;
  .jump-box {
    margin-left: 50px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>
